<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="shortcut icon" href="https://static.zongheng.com/favicon.ico"/>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        input{
            outline: none;
        }
        .mgl-26{
            margin-left: 26px;
        }
        .input-form{
            width: 348px;
            height: 36px;
            border: 1px solid #e6e6e6;
            font-size: 16px;
            text-indent: 30px;
        }
        .input-placeholder::placeholder{
            color: #a5232e;
        }
        /*********************part1**********************/
        .part1{
            height: 76px;
            border-bottom: 2px solid #dbdcdd;
        }
        .part1 #left{
            float: left;
        }
        .part1 #left img{
            margin-left: 160px;
            margin-top: 17px;
            width: 180px;
            height: 34px;
        }
        .part1 #right{
            float: right;
        }
        .part1 #right input{
            margin-right: 175px;
            margin-top: 36px;
            width: 58px;
            height: 22px;
            background: #526584;
            vertical-align: bottom;
            border: 0;
            color: #fff;
        }
        .part1 #right span{
            color: #526584;
            font-size: 14px;
            margin-right: 20px;
            padding-bottom: 2px;
        }
        /*********************part2**********************/
        .part2{
            width: 100%;
            height: 468px;
            background: #f1f2f3;
        }
        .part2 #enterzh{
            float: left;
        }
        .part2 #enterzh img{
            margin-left: 152px;
            margin-top: 24px;
        }
        .part2 #login{
            float: left;
        }
        .part2 #login form{
            margin-top: 28px;
            background: #fff;
            width: 400px;
            height: 332px;
            border: 1px solid #d9d9d9;
        }
        .part2 #login form .lgmethod{
            width: 350px;
            height: 40px;
            padding-top: 20px;
            padding-bottom: 20px;
            font-size: 20px;
        }
        .part2 #login form .lgmethod #account{
            float: left;
            width: 120px;
            padding-right: 55px;
            height: 66.75%;
            border-right: 1px solid #dedede;
        }
        #account #underline1{
            width: 120px;
            height: 4px;
            background: #a5232e;
            margin-top: 4px;
        }
        .part2 #login form .lgmethod #sms{
            float: right;
        }
        #sms #underline2{
            width: 120px;
            height: 4px;
            /*background: #a5232e;*/
            margin-top: 4px;
        }
        #username{
            margin-top: 5px;
            margin-bottom: 30px;
        }
        #username input{
            background: url("/static/image/user.png") no-repeat 1% 50%;
        }
        #password{
            margin-top: 30px;
            margin-bottom: 30px;
        }
        #password input{
            background: url("/static/image/pwd.png") no-repeat 1% 50%;
        }
        #forget-pwd{
            width: 349px;
            text-align: end;
        }
        #forget-pwd a{
            font-size: 12px;
            color: #777777;
        }
        input[type=submit]{
            margin-top: 20px;
            width: 350px;
            height: 50px;
            background: #a5232e;
            color: #FFFFFF;
            border: 0;
            font-size: 18px;
            border-radius: 3px;
        }
    </style>
    <body>
        <!--头部 图片+注册button-->
        <div class="part1">
            <div id="left">
                <a href="#" th:href="@{/index}">
                    <img src="/static/image/logo.png" th:src="@{/static/image/logo.png}"
                         alt="ebook">
                </a>
            </div>
            <div id="right">
                <span>没有账号</span>
                <a href="/#" th:href="@{/register}">
                    <input type="button" value="注册">
                </a>
            </div>
        </div>
        <!--中间  图片+登录表单-->
        <div class="part2">
            <div id="enterzh">
                <img th:src="@{/static/image/enterzh.png}"
                     src="/static/image/enterzh.png" alt="登录入口">
            </div>
            <div id="login">
                <form action="/#" th:action="@{/loginVerify}" th:method="post">
                    <div class="mgl-26 lgmethod">
                        <div id="account">
                            <span>账号密码登录</span>
                            <div id="underline1"></div>
                        </div>
                        <div id="sms">
                            <span>短信快速登录</span>
                            <div id="underline2"></div>
                        </div>
                    </div>
                    <div class="mgl-26" id="username">
                        <input class="input-form" type="text" name="username"
                               th:value="${username}"
                               placeholder="输入账号">
                    </div>
                    <div class="mgl-26" id="password">
                        <input class="input-form" type="password" name="password"
                                th:placeholder="${msg!=null?msg:'输入密码'}" th:class="|${iptClass} input-form|"
                                placeholder="输入密码">
                    </div>
                    <div class="mgl-26" id="forget-pwd">
                        <a href="/#">忘记密码</a>
                    </div>
                    <div class="mgl-26">
                        <input type="submit" value="登录" onclick="return sub()">
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script th:src="@{https://code.jquery.com/jquery-3.7.0.js}"
            integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
            crossorigin="anonymous"></script>
    <script>
        function sub(){
            let result = false;
            if (!preSub()) return result;
            let u_input = $('#username input');
            let name_input = u_input.val();
            $.ajax({
                async: false,
                type: 'POST',
                url: '/existUser',
                data: {username:name_input},
                success: function (res){
                    if (res){
                        u_input.val("");
                        u_input.attr("placeholder", "该用户未注册");
                        u_input.addClass("input-placeholder");
                    }
                    result = !res;
                }
            });
            return result;
        }

        function preSub(){
            if ($('#username input').val()===""||$('#username').val()==null){
                $('#username input').addClass('input-placeholder');
                $('#username input').attr('placeholder','用户名不能为空');
                return false;
            }
            if ($('#password input').val()==""||$('#password').val()==null){
                $('#password input').addClass('input-placeholder');
                $('#password input').attr('placeholder','密码不能为空');
                return false;
            }
            return true;
        }
    </script>
</html>